/**
 * @this CDFormSelectItem: form 的选择控件
 *
 * @flow
 *
 * ------------------------
  一、Form 的 ref使用：
  (1) item中的 本身的ref
    formRef={(e)=> this.`refForm` = e}
  (2) item中的 item HOC 的ref
    ref={(e)=> this.`refForm` = e}

  二、Form的children 的 ref使用: inputItem、selectItem、View、Text....
  (1) item中的 本身的ref
    itemRef={(e)=> this.`refItem` = e}
  (2) item中的 item HOC 的ref
    ref={(e)=> this.`refItem` = e}
 * ------------------------
 */
import React, { Component } from 'react'
import {
  View,
  Text,
  Image,
  Keyboard,
  ViewPropTypes,
} from 'react-native'

import PropTypes from 'prop-types'

import FormStyle from './config/FormStyle'
import FormValidation from './config/FormValidation'
import CDFormItem from './CDFormItem'

import FormItemHOC from './core/FormItemHOC'
import HitView from './config/HitView/index'

class CDFormSelectItem extends Component {
  constructor(props) {
    super(props)
    props.value && props.onChange && props.onChange(props.value)
  }

  static propTypes = {
    ...Text.propTypes,
    defaultValue: PropTypes.string,
    defaultValueTextColor: PropTypes.string,
    detailIcon: PropTypes.oneOfType([PropTypes.element, PropTypes.shape({ uri: PropTypes.string }), PropTypes.number]),
    detailIconStyle: ViewPropTypes.style,
    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    onChange: PropTypes.func,

    title: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.number]),
    titleStyle: Text.propTypes.style,
    isMust: PropTypes.bool,
    isHaveFlag: PropTypes.bool,
    mustStyle: Text.propTypes.style,
    selectStyle: Text.propTypes.style,
    iconStyle: ViewPropTypes.style,
    icon: PropTypes.oneOfType([PropTypes.element, PropTypes.shape({ uri: PropTypes.string }), PropTypes.number]),
    accessory: PropTypes.oneOfType([PropTypes.element, PropTypes.shape({ uri: PropTypes.string }), PropTypes.number, PropTypes.oneOf(['none', 'auto', 'indicator'])]),
    topSeparator: PropTypes.oneOfType([PropTypes.element, PropTypes.oneOf(['none', 'full', 'indent'])]),
    bottomSeparator: PropTypes.oneOfType([PropTypes.element, PropTypes.oneOf(['none', 'full', 'indent'])]),
    disabled: PropTypes.bool,
    onPress: PropTypes.func,
  }

  static defaultProps = {
    ...Text.defaultProps,
    formItemType: 'select',
    defaultValue: '请选择',
    accessory: 'indicator',
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { onChange, value } = this.props
    if (value !== nextProps.value) {
      onChange && onChange(nextProps.value)
    }
  }

  render() {
    let { style, title, titleStyle, detailIcon, detailIconStyle, defaultValue, defaultValueTextColor, isMust, isHaveFlag, mustStyle, icon, iconStyle,
      topSeparator, bottomSeparator, onPress, selectStyle, value, disabled, accessory, ...others } = this.props

    let defaultStyle = { }

    if (defaultValueTextColor === undefined) {
      defaultValueTextColor = FormStyle.ItemSelectPlaceholderColor
    }

    if (FormValidation.empty(value)) {
      value = defaultValue
    }

    if (FormValidation.empty(value) || value === defaultValue) {
      defaultStyle = { color: defaultValueTextColor, fontSize: FormStyle.ItemSelectPlaceholderFontSize }
    }
    if ((detailIcon || detailIcon === 0) && !React.isValidElement(detailIcon)) {
      detailIconStyle = [{
        width: FormStyle.ItemSelectDetailIconWidth,
        height: FormStyle.ItemSelectDetailIconHeight,
      }].concat(detailIconStyle)
      detailIcon = (
        <Image style={[detailIconStyle]} source={detailIcon} />
      )
    }

    selectStyle = [{
      color: FormStyle.ItemSelectTitleColor,
      fontSize: FormStyle.ItemSelectFontSize,
      marginLeft: FormStyle.ItemSelectTitleMarginLeft,
    }, defaultStyle].concat(selectStyle)

    return (
      <CDFormItem style={style}
        disabled={disabled}
        icon={icon}
        iconStyle={iconStyle}
        title={title}
        titleStyle={titleStyle}
        isMust={isMust}
        isHaveFlag={isHaveFlag}
        mustStyle={mustStyle}
        accessory={accessory}
        topSeparator={topSeparator}
        bottomSeparator={bottomSeparator}
        onPress={this._touchOnPress}
        detail={
          <HitView {...others} onPress={onPress} ref={(e) => { this.refHitView = e }}
            subView={
              <View style={{ flexDirection: 'row', alignItems: 'center' }} >
                {detailIcon}
                <Text style={selectStyle} {...others} >{value}</Text>
              </View>
          } />
        }
      />
    )
  }

  _touchOnPress = () => {
    const { onPress } = this.props
    Keyboard.dismiss()
    if (this.refHitView && this.refHitView.onPress) {
      this.refHitView.onPress()
    } else {
      onPress && onPress()
    }
  }
}

export default FormItemHOC(CDFormSelectItem)